<template>
  <p @click="inputValue = !inputValue">
    <i :class="`iconfont icon-${inputValue ? 'checked' : 'unchecked'}`"/>
    <slot/>
  </p>
</template>

<script lang="ts"
        setup>
import {computed} from 'vue'

let emits = defineEmits<{
  (e: 'update:modelValue', v: boolean): void
}>()

let props = defineProps<{
  modelValue: boolean
}>()

let inputValue = computed({
  get() {
    return props.modelValue
  },
  set(v: boolean) {
    emits('update:modelValue', v)
  }
})
</script>

<style lang="less"
       scoped>
p {
  cursor: pointer;

  .iconfont {
    margin-right: 4px;

    &.icon-checked {
      color: @xtxColor;
    }
  }
}
</style>